<template>
	<view class="">
		<view class="app" :style="skin">
			<jnavbar :title="'充值'" :PageId="18"></jnavbar>
			<u-gap height="26" bg-color="#ffffff"></u-gap>
			<view class="banner">
				<text>可用{{ integralBalance.balance_text }}</text>
				<text>￥{{ UserInfo.total }}</text>

				<view class="banner_bg"></view>
			</view>
			<view class="inputdiv">
				<!-- <text class="title">选择充值金额</text> -->
				<view>
					<input v-numberinput.float="2" type="digit" v-model="value" placeholder="请输入充值金额" />
					<text>元</text>
				</view>
			</view>
			<view class="list">
				<view @click="changevalue(item, i)" :class="actid == i ? 'item active' : 'item'" v-for="(item, i) in list" :key="i">
					<text>{{ item.name }}</text>
					<!-- <text>赠送{{ (item.value * item.rate) / 100 }}</text> -->
				</view>
			</view>
			<u-gap height="45" bg-color="#ffffff"></u-gap>
			<view class="activity" v-if="rewardlist.length>0">
				<text class="title">充值奖励</text>
				<view class="u-flex u-p-20 activity-item" v-for="(item,i) in rewardlist" :key='i'>
					<view class="left">
						<text>{{item.single_recharge}}</text>
						<text>元</text>
					</view>

					<view class="u-flex u-flex-col u-col-top right">
						<view class=""><text>单笔充值奖励</text></view>
						<view class="u-m-t-20 reward">
							<text v-if="item.rewards_type.indexOf('3')>-1">{{item.balance}}余额</text>
							<text v-if="item.rewards_type.indexOf('2')>-1">{{item.credit}}积分</text>
							<block >
							<text v-if="item.rewards_type.indexOf('1')>-1&&item.coupon.length>0">优惠券x{{item.coupon.length}}</text>
							<!-- <text v-for="(coupon,index) in item.coupon" :key="index">{{coupon.name}}</text> -->
							</block>
							
						
						</view>
					</view>
				</view>
				<u-gap height="120"></u-gap>
			</view>
			<view class="btns-div">
			<!-- 	<text v-if="integralBalance.balance_setting&&integralBalance.balance_cash">最低充值金额：{{integralBalance.balance_cash}}</text> -->
			<!-- #ifndef MP-WEIXIN -->
			<u-button  type="primary" @click="recharge" :disabled="!isrecharge">立即充值</u-button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			
			<u-button  type="primary" @click="requestSubscribe" :disabled="!isrecharge">立即充值</u-button>
			<!-- #endif -->	
			</view>
	
		</view>
		
		<tab-bar ref="tabbar" :PageId="18"></tab-bar>
	</view>
</template>

<script>
import util from '@/common/util.js';
import {mapState, mapMutations} from 'vuex';

export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			list: [
				{
					name: '100元',
					value: 100
				},
				{
					name: '200元',
					value: 200
				},
				{
					name: '500元',
					value: 500
				},
				{
					name: '800元',
					value: 800
				},
				{
					name: '1000元',
					value: 1000
				},
				{
					name: '2000元',
					value: 2000
				}
			],
			value: 100,
			rate: 0,
			money: 0,
			actid: 0,
			customStyle: {
				width: '649rpx',
				height: '90rpx',
				'box-shadow': '-2px 5px 9px 0px var(--content-color)',
				'border-radius': '45rpx',
				'font-size': '30rpx',
				color: 'rgba(255, 255, 255, 1)'
			},
			integralBalance: {},
			tmplIds: [],
			rewardlist:[]
		};
	},
	computed: {
		isrecharge() {
			let a = this.integralBalance.balance_setting && this.value - this.integralBalance.balance_cash >= 0;
			return a;
		},

		skin() {
			return this.$store.state.skin;
		},

		...mapState({
			UserInfo: state => state.userInfo
		})
	},
	directives: {
		numberinput: {
			bind: function(el, binding, vnode) {
				const ele = el.tagName === 'INPUT' ? el : el.querySelector('input');
				ele.addEventListener('input', util.onInput(el, ele, binding, vnode), false);
			}
		}
	},
	async onLoad() {
		await this.$getWx;
		this.getjuris('integralBalance').then(a => {
			this.integralBalance = a;
		});
		this.getjuris_addons([36]).then(r => {
			if(r[36]){
				this.getrechargereward();
			}
		})
		
		// #ifdef MP-WEIXIN
		this.wxamessage();
		// #endif
	},
	methods: {
		messageresult(data) {
			this.$http('/wx/tool/wxa/message/result', data, 'POST').then(res => {
				this.recharge();
			});
		},
		requestSubscribe() {
			var _this = this;
			if (_this.tmplIds.length > 0) {
				wx.requestSubscribeMessage({
					tmplIds: _this.tmplIds,
					success(res) {
						delete res.errMsg;
						let data = {
							data: JSON.stringify(res)
						};
						_this.messageresult(data);
					},
					fail(res) {
						_this.recharge();
						console.log(res);
					},
					complete(res) {
						console.log(res);
					}
				});
			} else {
				this.recharge();
			}
		},
		wxamessage() {
			this.$http('/wx/tool/wxa/message/recharge', {}, 'GET').then(res => {
				let tmplIds = res.data.msg;
				this.tmplIds = tmplIds;
			});
		},
		changevalue(item, i) {
			this.actid = i;
			this.value = item.value;
		},
		userCenter(res) {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, this.UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
			});
		},
		getrechargereward() {
			let data = {};
			this.$http('/recharge/reward', data, 'GET').then(res => {
				this.rewardlist=res.data.msg
			});
		},
		recharge() {
			const _this = this;
			let data = {
				money: this.value
			};
			this.$http('/payment/recharge', data, 'POST').then(res => {
				const json = res.data.msg;
				if (res.statusCode == 200) {
					// #ifdef MP-WEIXIN
					if (json.mode == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							appId: json.appId,
							timeStamp: json.timeStamp,
							nonceStr: json.nonceStr,
							package: json.package,
							signType: json.signType,
							paySign: json.paySign,
							success: function(res) {
								_this.payback();
							},
							fail: function(err) {}
						});
					} else {
						wx.requestOrderPayment({
							provider: 'wxpay',
							appId: json.appId,
							timeStamp: json.timeStamp,
							nonceStr: json.nonceStr,
							package: json.package,
							signType: json.signType,
							paySign: json.paySign,
							success: function(res) {
								_this.payback();
							},
							fail: function(err) {}
						});
					}
					// #endif
					// #ifndef MP-WEIXIN
					let Browser = util.getBrowser();
					let is_wx = uni.getStorageSync('is_wx');
					if (Browser == '微信' && is_wx) {
						util.wxPublicPay(json, this.payback);
					} else {
						let mid = uni.getStorageSync('mall_id');
						let token = uni.getStorageSync('token');
						_AP.pay(json, mid, token);
					}
					//
					// util.wxPublicPay(json, _this.userCenter);
					// #endif
				} else {
					uni.showModal({
						title: '提示',
						content: json,
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.app {
	width: 750rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	background: #fff;
}
.banner {
	width: 657rpx;
	height: 264rpx;
	background: linear-gradient(-30deg, var(--main-color), var(--content-color));
	box-shadow: 0px 1px 55px 2px var(--content-color);
	border-radius: 10rpx 80rpx 10rpx 10rpx;
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	margin: 0 24rpx;
}
.banner_bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 278rpx;
	height: 181rpx;
	background: var(--main-color);
	opacity: 0.74;
	border-radius: 10rpx 80rpx 10rpx 180rpx;
}
.banner text:first-child {
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	font-family: SanFranciscoDisplay-Medium;
	font-weight: 500;
	margin-top: 89rpx;
	margin-left: 62rpx;
}

.banner text:nth-child(2) {
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	margin-top: 16rpx;
	font-size: 68rpx;
	font-weight: bold;
	color: #ffffff;
	margin-left: 62rpx;
	line-height: 1;
}

.inputdiv {
	font-size: 38rpx;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	width: 653rpx;
	height: 72rpx;
	margin-top: 62rpx;
}

.inputdiv view {
	width: 653rpx;
	height: 72rpx;
	background: #eeeeee;
	border-radius: 10rpx;

	background: rgba(243, 243, 243, 1);
	position: relative;
}

.inputdiv view input {
	width: 100%;
	height: 72rpx;
	padding-left: 24rpx;
	box-sizing: border-box;
}

.inputdiv view text {
	position: absolute;
	right: 24rpx;
	height: 72rpx;
	line-height: 72rpx;
	top: 0;
}

.list {
	width: 653rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 50rpx;
	border-bottom: 1px #efefef solid;
	padding-bottom: 17rpx;
}

.item {
	margin-bottom: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	width: 202rpx;
	height: 110rpx;
	background: #ffffff;
	border: 2rpx solid #f4f4f4;

	font-size: 34rpx;

	font-weight: bold;
	color: #333333;
}
.item text:nth-child(2) {
	font-size: 24rpx;
	margin-top: 10rpx;
}
.active {
	background: var(--content-color);

	color: var(--main-color);
	border: 2rpx solid var(--main-color);
}

.tip {
	font-size: 24rpx;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	margin-top: 24rpx;
}
.tip_div {
	font-size: 36rpx;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	margin-top: 24rpx;
	width: 100%;
	margin-left: 32rpx;
}
.tip_div view {
	margin-bottom: 16rpx;
}
.tip_div text {
	width: 686rpx;
	font-size: 24rpx;
	margin-top: 24rpx;
}
.tip text:last-child {
	color: #beb28a;
}
.activity {
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	.activity-item {
		border: 2rpx solid var(--main-color);
		border-radius: 20rpx;
		width: 653rpx;
		margin-bottom: 40rpx;

		.left {
			width: 220rpx;
			font-size: 24rpx;
			color: var(--main-color);
			text:first-child {
				font-size: 48rpx;
			}
		}
		.right {
			position: relative;
			font-size: 24rpx;
			flex: 1;
			.reward {
				display: flex;
				flex-wrap: wrap;
				text {
					margin-bottom: 20rpx;
					color: var(--main-color);
					background: var(--content-color);
					width: 62px;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
					border-radius: 4px;
					margin-right: 4px;
				}
			}
		}
	}
}
.btns-div{
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	padding:20rpx 50rpx;
	background-color: #fff;
}
</style>
